<template>
	<div class="buss_box">
		<div class="box_title">
			<img src="../../image/icon_buss_list_title.png" alt="" />
		</div>
		<div class="box_cell">
			<div class="box_cell_item cell_title">
				<div>序号</div>
				<div>企业名称</div>
			</div>
			<div
				class="box_cell_item"
				:class="{ active_item: activeItem == item.id }"
				v-for="(item, index) in tableArray"
				:key="index"
				@click="handleCellItem(item)"
			>
				<div>{{ index + 1 }}</div>
				<div>{{ item.name }}</div>
				<img v-if="activeItem == item.id" src="../../image/icon_location.png" alt="" @click.stop="handleLocation(item)" />
			</div>
		</div>
	</div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';

const emit = defineEmits(['clickLocation', 'clickItem']);

const tableArray = ref();
const activeItem = ref('');

//点击列表
const handleCellItem = (row: any) => {
	activeItem.value = row.id;
	emit('clickItem', row);
};
//点击定位点
const handleLocation = (row: any) => {
	emit('clickLocation', row);
};

const getList = () => {
	tableArray.value = [
		{
			id: '1',
			name: '江山市富美新塘集体经济发展有限公司',
			lat: 28.585267,
			lng: 118.4748673,
		},
	];
    emit('clickLocation', tableArray.value[0]);
};

onMounted(() => {
	getList();
});
</script>
<style lang='less' scoped>
.buss_box {
	width: 388px;
	max-height: 100%;
	box-sizing: border-box;
	padding: 8px;
	background: url('../../image/icon_box_bg_2.png') no-repeat;
	background-size: 100% 100%;
	display: none;
	.box_title {
		height: 50px;
		width: 100%;
		background: url('../../image/icon_title_bg.png') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-left: 46px;
		display: flex;
		align-items: center;
		img {
			width: 108px;
			height: 16px;
		}
	}
}
.box_cell {
	margin-top: 20px;
	height: calc(100% - 70px);
	width: 100%;
	overflow-y: auto;
	&_item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 48px;
		position: relative;
		cursor: pointer;
		padding: 0 14px;
		box-sizing: border-box;
		&:nth-child(2n - 1) {
			background-color: #e6f6ff10;
		}
		&:nth-child(2n) {
			background: linear-gradient(90deg, rgba(0, 112, 207, 0.1) 0%, rgba(0, 112, 207, 0.1) 100%);
		}
		div {
			color: #c9ffff;
			font-size: 14px;
			&:first-child {
				width: 60px;
			}
			&:last-child {
				width: calc(100% - 60px);
			}
		}
		img {
			position: absolute;
			right: 16px;
			width: 16px;
			height: 16px;
			cursor: pointer;
		}
	}
	.cell_title {
		div {
			color: #e6f6ff;
		}
	}
	.active_item {
		&::after {
			content: '';
			width: 2px;
			height: 44px;
			background-color: #3fffff;
			position: absolute;
			left: 0;
		}
		div {
			color: #3fffff;
		}
	}
}
</style>